<template>
  <div style="padding: 10px">
    <div style="padding-bottom: 10px">
      <d-button @click="setRadio(1)">选中id为1的行</d-button>
      <d-button @click="setRadio(2)">选中id为2的行</d-button>
      <d-button @click="setRadio(3)">选中id为3的行</d-button>
    </div>
    <d-table
      ref="tableRef"
      :data="tableData"
      :columns="columns"
      highlight-current-row
      :showPagination="false"
      @select-radio="handleSelectChange"></d-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'

  const tableData = [
    { date: '2016-05-03', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles', id: 1 },
    { date: '2016-05-02', name: 'Tom2', address: 'No. 189, Grove St, Los Angeles', id: 2 },
    { date: '2016-05-04', name: 'Tom3', address: 'No. 189, Grove St, Los Angeles', id: 3 }
  ]
  const columns = [
    { label: '单选', prop: 'date', cType: 'radio' },
    { label: '日期', prop: 'date', width: 120 },
    { label: '姓名', prop: 'name' },
    { label: 'id', prop: 'id' }
  ]
  const handleSelectChange = (val: any) => {
    ElMessage.success(`选中的行数据为：${JSON.stringify(val)}`)
  }
  // 设置选中
  const tableRef = ref()
  const setRadio = (id: number) => {
    tableRef.value?.setRadio(id)
  }
</script>
